<template>
  <div class="planeTicket">
    <h2 class="title">
      <i class="iconfont iconfeiji"></i><span>国内机票</span>
    </h2>
    <div class="content">
      <div class="search-plane">
         <search-form></search-form>
      </div>
      <div class="advertisement">
        <img src="http://157.122.54.189:9093/images/pic_sale.jpeg" />
      </div>
    </div>
    <div class="promise">
      <el-row type="flex">
          <el-col><i class="iconfont iconweibiaoti-_huabanfuben" style="color:#409EFF;"></i><span>100%航协验证</span> </el-col>
          <el-col><i class="iconfont iconbaozheng" style="color:green;"></i><span> 出行保证</span></el-col>
          <el-col><i class="iconfont icondianhua" style="color:#409EFF;"></i><span>7x24小时服务</span></el-col>
      </el-row>
    </div>
    <div class="discount">
      <h2 class="title"><i class="iconfont icontejiajipiao"></i> <span>特价机票</span> </h2>
      <div class="recommend">
        <el-row type="flex" :gutter="15">
          <el-col :span="6" v-for="(item, index) in recList" :key="index">
            <!-- <router-link :to="`/plane/fight?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`">
                <img :src="item.cover" alt="">
                <div class="word">
                  <span>{{item.departCity}}-{{item.destCity}}</span>
                  <span>￥{{item.price}}</span>
                </div>
            </router-link> -->
            <div class="recItem" @click="turnToFligth(item)">
                <img :src="item.cover" alt="">
                <div class="word">
                  <span>{{item.departCity}}-{{item.destCity}}</span>
                  <span>￥{{item.price}}</span>
                </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import searchForm from '../../components/plane/searchform'
export default {
  components: {
    searchForm
  },
  data () {
    return {
      recList: []
    }
  },
  created () {

  },
  methods: {
    getRecPic () {
      this.$http.get('/airs/sale').then(res => {
        const { data } = res.data
        this.recList = data
      })
    },
    turnToFligth (item) {
      this.$router.push({
        path: '/plane/flight',
        query: {
          departCity: item.departCity,
          departCode: item.departCode,
          destCity: item.destCity,
          destCode: item.destCode,
          departDate: item.departDate
        }
      })
    }
  },
  mounted () {
    this.getRecPic()
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.planeTicket{
  width: 1000px;
  margin: 0 auto;
  .title{
    height: 50px;
    line-height: 50px;
    color: orange;
    font-size: 22px;
    i{
      font-size: 22px;
    }
  }
  .content{
    display: flex;
    justify-content: space-between;
    height: 350px;
    .search-plane{
      width: 40%;
      height: 100%;
      border: 1px solid #eee;
      margin-right: 1px;
    }
    .advertisement{
      flex: 1;
      margin-left: 20px;
    }
  }
  .promise{
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color:#eee;
    font-size: 15px;
    i{
      font-size: 28px;
    }
    span{
      vertical-align: 3px;
    }
  }
  .discount{
    width: 100%;
    font-size: 22px;
    .title{
      height: 50px;
      line-height: 50px;
      color: rgb(140, 206, 245);
      font-size: 22px;
      border-radius: 5px;
      i{
      font-size: 22px;
    }
    }
    .recommend{
      width: 100%;
      border: 1px solid #eee;
      margin-bottom: 50px;
      padding: 20px;
      .recItem{
        cursor: pointer;
      }
      /deep/.el-row{
         position: relative;
        img{
          width: 100%;
          height: 150px;
        }
        .word{
          position: absolute;
          bottom: 0px;
          font-size: 18px;
          display: flex;
          width: 23.5%;
          color: #fff;
          height: 28px;
          background-color: rgba(0 ,0 ,0 , 0.5);
          span:nth-child(1){
            align-self: flex-start;
            font-size: 16px;
            height: 28px;
            margin-left: 10px;
          }
          span:nth-child(2){
            flex: 1;
            align-self: flex-end;
            text-align: right;
            height: 28px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
